<template>
    <div class="ml-auto flex cursor-pointer flex-row flex-nowrap">
    <!-- <CommonMenu :menuOpen="menuOpen" @close="menuOpen = false"/> -->
        <div v-for="(item, name) in fns" :key="name"
        class="relative flex h-12 flex-row flex-nowrap items-center rounded p-2 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700"
        @click='item.fn'>
        <span class="flex w-8 items-center justify-center sm:w-10">
            <component :is="item.icon"></component>
        </span>
        <span class="hidden pr-4 sm:inline">{{ item.text }}</span>
        </div>
    </div>
</template>

<script setup>
import IconLogout from "@/components/icon/IconLogout.vue";
import { userLogout } from "@/http/login";
import { msgSuccess } from "@/method/quickUse";
import { useRouter } from "vue-router";

const fns = {
    logout: {
        test: "注销",
        icon: IconLogout,
        fn: () => {
            userLogout().then(res=>{
                msgSuccess("退出成功")
                useRouter().push("/login")
            })
        }
    }
}
</script>